.publish-app,
.publish-app * {
  box-sizing: border-box;
}

.publish-app {
  background: linear-gradient(135deg,
      rgba(37, 46, 77, 1) 0%,
      rgba(21, 24, 45, 1) 100%);
  width: var(--app-width);
  height: var(--app-height);
  position: relative;
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.right-botton-light {
  background: linear-gradient(135deg,
      rgba(250, 178, 255, 1) 0%,
      rgba(25, 4, 229, 1) 100%);
  border-radius: 50%;
  width: 30vw;
  height: 30vw;
  position: absolute;
  left: 93%;
  top: 62%;
  filter: blur(250px);
}

.left-up-light {
  background: linear-gradient(135deg,
      rgba(250, 178, 255, 1) 0%,
      rgba(25, 4, 229, 1) 100%);
  border-radius: 50%;
  width: 29vw;
  height: 29vw;
  position: absolute;
  left: -18%;
  top: -13%;
  filter: blur(250px);
}

.tong-ji {
  color: #ffffff;
  text-align: left;
  font-family: "KronaOne-Regular", sans-serif;
  font-size: 1.5vw;
  text-transform: uppercase;
  position: absolute;
  left: 4%;
  top: 7%;
}

/* 连接按钮样式 */
.connectIoT {
  display: flex;
  flex-direction: row;
  gap: 2vw;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 4%;
  top: 67%;
}

.button-connect {
  background: #706af6;
  border-radius: 50px;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.Connect {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  position: relative;
}

.button-disconnect {
  background: #6ab3f6;
  border-radius: 50px;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.Disconnect {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  position: relative;
}

/* 订阅Post按钮样式 */
.sub-topic {
  display: flex;
  flex-direction: row;
  gap: 2vw;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 4%;
  top: 75%;
}

.button-sub-post {
  background: #706af6;
  border-radius: 50px;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.sub-post {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  position: relative;
}

.button-unsub-post {
  background: #6ab3f6;
  border-radius: 50px;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.un-sub-post {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  position: relative;
}

/* 发布数据按钮样式 */
.publish-data {
  display: flex;
  flex-direction: row;
  gap: 2vw;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 4%;
  top: 83%;
}

.button-pub-random {
  background: #6ab3f6;
  border-radius: 50px;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.pub-random {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  position: relative;
}

.button-pub-all {
  background: #706af6;
  border-radius: 50px;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.pub-all {
  color: #ffffff;
  text-align: center;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  position: relative;
}

/* 按钮样式 */
.button-pub-random,
.button-pub-all,
.button-sub-post,
.button-unsub-post,
.Connect,
.Disconnect {
  cursor: pointer;
  z-index: 10;
}

.topic-publish {
  color: #ffffff;
  text-align: left;
  font-family: "OpenSans-Bold", sans-serif;
  font-size: 2.5vw;
  position: absolute;
  left: 4%;
  top: 58%;
  width: 28vw;
}

.thp-data-publish {
  text-align: left;
  font-family: "Manrope-Bold", sans-serif;
  line-height: 5vw;
  font-weight: 700;
  position: absolute;
  left: 4%;
  top: 18%;
}

.thp-data-publish-span {
  color: #ffffff;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 6vw;
}

.thp-data-publish-span2 {
  color: #706af6;
  font-family: "Manrope-Bold", sans-serif;
  font-size: 6vw;
}

.intro {
  color: #ffffff;
  text-align: left;
  font-family: "Manrope-Regular", sans-serif;
  font-size: 1vw;
  line-height: 2vw;
  font-weight: 400;
  opacity: 0.5;
  position: absolute;
  left: 4%;
  top: 42%;
  width: 30vw;
}

.publish {
  position: absolute;
  inset: 0;
}

.logs {
  background: #e1e0e0;
  border-radius: 2vw;
  width: 50vw;
  height: 54vh;
  position: absolute;
  right: 6%;
  top: 38%;
  padding: 1vw;
  /* 内边距 */
  overflow-y: auto;
  /* 如果内容超出容器高度，允许滚动 */
}

.title {
  color: #706af6;
  text-align: right;
  font-family: "OpenSans-Bold", sans-serif;
  font-size: 3vw;
  font-weight: 700;
  position: absolute;
  right: 36%;
  top: 30%;
  width: 30vw;
}

.illustration {
  position: absolute;
  right: 4%;
  top: 2%;
  bottom: auto;
  width: 25vw;
}